<template>
	<view class="">
		<cu-custom :isBack="true" textRight="true" type="custom-recuit">
			<block slot="backText">
				<view class="titilestyle">
					{{title}}
				</view>
			</block>
		</cu-custom>
		<view class="content">
			<view class="search flex align-center justify-between">
				<input type="text" value="" :adjust-position="false" placeholder="请手动输入车辆编码或扫描二维码" />

				<view class="cuIcon-scan " @click="scane">

				</view>

			</view>

			<view class="bicycle  flex">

				<view class="left flex align-stretch justify-between flex-direction ">

					<view class="item  round middle flex justify-center" v-for="(left,i) in bicycle.left" :key="i"
						:class="left.status?'hover':'nohover'" @click="changeItem('left',i)">
						{{left.name}}
					</view>


				</view>

				<view class="center  middle">
					<image :src="res+'/static/motorcycles/img/bicycle.png'" mode=""></image>

				</view>

				<view class="right flex align-stretch justify-between flex-direction">
					<view class="item nohover round middle flex justify-center" v-for="(right,i) in bicycle.right"
						:key="i" :class="right.status?'hover':'nohover'" @click="changeItem('right',i)">
						{{right.name}}
					</view>
				</view>

			</view>

			<view class="desc">
				<textarea value="" :adjust-position="false" placeholder="撰写车辆问题和上传车辆图片，帮助我们更好地解决您的问题。"
					maxlength="300" />

			</view>

			<view class="upload" v-if="!isReasize">
				<robby-image-upload v-model="imageData" @delete="deleteImage" @add="addImage" limit=9
					:server-url-delete-image="serverUrlDeleteImage" :server-url="serverUrl" :fileKeyName="file">
				</robby-image-upload>
			</view>


			<view class="sumbit" v-if="!isReasize">
				<view class="top middle">
					工作人员会在30分钟内进行答复，请耐心等待
				</view>
				<view class="item round middle" @click="sumbit">
					提交
				</view>
			</view>


		</view>

	</view>
</template>

<script>
	import {
		getData
	} from "@/static/motorcycles/api.js"

	import robbyImageUpload from '@/components/robby-image-upload/robby-image-upload.vue'
	export default {
		components: {
			robbyImageUpload
		},
		data() {
			return {
				title: "故障报修",
				tabIndex: 0,
				isReasize: false,
				res: this.apiHost + "/static/otherApp/",
				taber: [

					{
						name: "电单车"
					},
					{
						name: "自行车"
					},
					{
						name: "观光车"
					},
					{
						name: "滑板车"
					},
					{
						name: "校外大巴"
					}

				],
				list: [],
				bicycle: {
					left: [

						{
							name: "车俩没电",
							status: false
						},
						{
							name: "无法还车",
							status: false
						},
						{
							name: "车辆过脏",
							status: false
						},

						{
							name: "刹车失灵",
							status: false
						}
					],
					right: [

						{
							name: "头盔丢失",
							status: false
						},
						{
							name: "车把歪斜",
							status: false
						},
						{
							name: "扫码失败",
							status: false
						},
						{
							name: "其他问题",
							status: false
						}


					]
				},
				imageData: [],
				serverUrl: '/comm/imageUp',
				serverUrlDeleteImage: '/comm/delupload',
				formData: {
					content: '',
					area_id: uni.getStorageSync('area_id'),
					pics: {},
				},


			}
		},
		onResize() {
			console.log();


		},
		onLoad() {
			this.getList();
		},
		mounted() {
			const self = this;
			let h= window.innerHeight;
			window.onresize = () => {
				if(window.innerHeight<h){
					this.isReasize = true;
				}
				else{
					this.isReasize = false;
				}
			};
		},
		methods: {
			/**
			 * @param {Object} item
			 * @param {Object} i
			 */
			changeItem(item, i) {
				let status = (this.bicycle[item][i].status) ? false : true;
				this.bicycle[item][i].status = status;



			},
			sumbit(){
				uni.showLoading({
					title:"请求中...",
					
				})
				setTimeout(()=>{
					uni.showToast({
						title:"提交成功",
						icon:"success"
					})
					
				},1000)
			},
			deleteImage: function(e) {

			},
			addImage: function(e) {

				this.formData.pics = e.allImages
			},


			changeTab(i) {
				this.tabIndex = i;
				this.getList();
			},
			getList() {
				console.log("tab" + this.tabIndex)
				getData(this.tabIndex).then(r => {
					this.list = r;
					console.log(r)
				})
			},
			scane(){
				uni.scanCode({
				    onlyFromCamera: true,
				    success: function (res) {
				        console.log('条码类型：' + res.scanType);
				        console.log('条码内容：' + res.result);
				    }
				});
				
				// uni.navigateTo({
				// 	url:"./scan"
				// })
			}
			
			
		}


	}
</script>

<style lang="scss">
	.content {
		$itemW: calc(100vw*(670/750));


		width: $itemW;

		margin: 0 40rpx 0 40rpx;

		.search {

			height: calc(100vw*(72/750));
			background: #FFFFFF;
			padding: 0 30rpx;
			box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.05);
			border-radius: 20rpx;

			input {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}

			.cuIcon-scan {
				font-size: 42rpx;
			}


		}


		.bicycle {
			height: calc(100vw*(220/750));
			margin-top: 80rpx;

			.left,
			.right {
				width: calc(100vw*(150/750));
				height: calc(100vw*(260/750));
				margin-top: calc(-100vw*(20/750));
				font-size: 24rpx;
				font-family: PingFang SC;

				.item {
					height: calc(100vw*(50/750));

				}

				.nohover {
					border: 2rpx solid #DBDBDB;
				}

				.hover {
					background: #1270E0;

					font-weight: 800;
					color: #FFFFFF;
				}

			}

			.center {
				width: calc(100vw*(370/750));
				height: inherit;

				image {
					width: calc(100vw*(329/750));
					height: calc(100vw*(219/750));
				}
			}





		}

		.desc {
			margin-top: 80rpx;
			background: #FFFFFF;
			height: calc(100vw*(312/750));
			box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.05);
			border-radius: 20rpx;
			padding: 36rpx 49rpx;

			textarea {
				width: inherit;
				height: inherit;
			}

		}

		.sumbit {
			position: absolute;
			bottom: 40rpx;

			.top {
				font-size: 24rpx;
				font-weight: 500;
				color: #999999;
			}

			.item {
				width: $itemW;
				height: calc(100vw*(100/750));
				background: #1270E0;
				font-size: 32rpx;
				font-weight: 800;
				color: #FFFFFF;
				margin-top: 40rpx;
			}

		}

	}
</style>
